import { useState, createRef } from 'react';
import './society.scss';
import { Input, Pagination } from 'antd';
const { Search } = Input;

const onSearch = (value) => console.log(value);

export default function Society() {
  // 热门搜索
  const hotSearch = [
    '热门搜索：',
    'JAVA',
    '算法',
    '数据',
    '前端',
    '产品经理',
    '运营',
    '交互',
    '服务专家',
  ];
  // 职位类别
  const rocket_ul = [
    '全部',
    '技术',
    '产品',
    '设计',
    '市场营销',
    '招商营运',
    '平台管理',
    '综合',
    '客服',
    '买菜',
  ];
  // 热招岗位
  const rocket_ul_tow = [
    '客服主管',
    '商业化营销策划',
    '新媒体运营',
    'Java开发工程师（直播-新媒体业务）',
    'java研发工程师（多多进宝方向）',
    '产品运营',
    'KOL运营-短视频方向,广告创意经理/市场营销经理',
  ];

  // 最新发布
  const newsList = [
    // 全部
    [
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '智能客服产品（平台客服方向）',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
    ],

    // 技术
    [
      {
        title: '支付方向-研发工程师',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '支付方向-数据分析师',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '支付方向-算法工程师',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
      {
        title: '支付方向-算法工程师',
        listChild: [
          {
            image: require('./img/1.svg').default,
            span: '技术类',
          },
          {
            image: require('./img/2.svg').default,
            span: '上海',
          },
          {
            image: require('./img/3.svg').default,
            span: '若干',
          },
          {
            image: require('./img/4.svg').default,
            span: '2020-10-27',
          },
        ],
      },
    ],
  ];

  const [list, setList] = useState(newsList[0]);
  const [idx, setIdx] = useState(1);
  // 选项卡事件
  const bef = createRef(); // 创建ref对象
  // 分页
  const [indexId, setIndexId] = useState(0);
  // function onShowSizeChange(current, pageSize) {
  //   console.log(current, pageSize);
  // }

  const onChange = (index) => {
    setIdx(index);
    setIndexId((index - 1) * 3);
  };

  // 分页结束
  const change_nav = (index) => {
    setIdx(1);
    // 获取全部的li元素 bef.current.children
    let refObj = Array.from(bef.current.children); // 把对象封装成数组
    for (let i in refObj) {
      if (i === index) {
        // 添加样式
        refObj[i].className = 'rocket_ul_li';
      } else {
        refObj[i].className = '';
      }
    }
    setList(newsList[index]);
  };
  return (
    <div className="body">
      {/* 图片 */}
      <div className="recruitBanner___hORju"></div>

      {/* 搜索框 */}
      <div className="rocket-row">
        <Search
          placeholder="搜索职位名称"
          allowClear
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
          className="rocket-input"
        />

        <div>
          <ul className="recruit-search-keywords">
            {hotSearch.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      </div>

      {/* 职位分类 */}
      <div className="font-dark-gray">
        {/* 左边职位分类 */}
        <div className="font-dark-gray-left">
          <div className="filter-title">职位类别</div>
          <div className="xian"></div>
          <div>
            <ul className="rocket_ul" ref={bef}>
              {rocket_ul.map((item, index) => {
                return (
                  <li
                    className={index === 0 ? 'rocket_ul_li' : ''}
                    onClick={() => change_nav(index)}
                    key={index}>
                    {item}
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="kongbai"></div>
          <div className="filter-title">热招岗位</div>
          <div className="xian"></div>
          <div>
            <ul className="rocket_ul_tow">
              {rocket_ul_tow.map((item, index) => {
                return <li key={index}>{item}</li>;
              })}
            </ul>
          </div>
          <div className="kongbai"></div>
          <div className="filter-title">招聘小程序</div>
          <div className="xian"></div>
          <div>
            <img
              className="pdd"
              src="https://careers.pinduoduo.com/jobs/_next/static/images/recruitQrcode-037c32b5e36961cbc22643cd850c7768.jpg"
              alt=""
            />
          </div>
        </div>
        {/* 最新发布 */}
        <div className="font-dark-gray-right">
          <div className="font-dark-gray-right_new">
            <div>最新发布</div>
          </div>

          {list.slice(indexId, indexId + 3).map((item, index) => {
            return (
              <div className="rocket-card-body" key={index}>
                <p>{item.title}</p>
                <h4>详情</h4>
                <ul className="rocket-card-body_ul">
                  {item.listChild.map((item, index) => {
                    return (
                      <li key={index}>
                        <img src={item.image} alt="" />
                        <span>{item.span}</span>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>
      </div>

      {/* 分页器 */}
      <Pagination
        className="page"
        showSizeChanger
        // onShowSizeChange={onShowSizeChange}
        defaultCurrent={1}
        total={list.length * 10}
        onChange={onChange}
        pageSize={10}
        current={idx}
      />

      <div className="div"></div>
    </div>
  );
}
